// @ts-ignore
import styled from "styled-components";
const HomeStyle=styled.div`
  position: relative;
  margin: 0 auto;

  .lunbo-box {
    position: relative;
    width: 100%;
  }
  .lunbo-box:hover .lunbo-btn{
    opacity: .7;
  }
  .lunbo-btn{
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    z-index: 10;
    cursor: pointer;
    transition: opacity 400ms;
  }
  .lunbo-btn:hover{
    background: var(--theme-color);
  }
  .lunbo-left-btn{
    left: 50px;
  }
  .lunbo-right-btn{
    right: 50px;
  }
  .lunbo-img {
    width: 100%;
    height: 100%;
  }
  .lunbo-item-box{
    display: flex!important;
    padding: 0 50px 30px;
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  .music-cover-box-item{
    display: flex!important;
    padding: 0 100px;
    flex-wrap: wrap;
    justify-content: left!important;
  }
  .ranking-list-box{
    display: flex;
    justify-content: center;
  }
`;
export default HomeStyle;
